<template>
	<!-- <u-navbar back-icon-color="#19264B" title-color="#19264B" :is-fixed="true" back-text="" title="个人信息"
		:background="{ background: 'none' }" :border-bottom="false"></u-navbar> -->
	<view class="u-p-56">
		<view class="u-flex" style="justify-content: center;">
			<!-- <button @chooseavatar="chooseavatar" open-type="chooseAvatar" class="u-reset-button">
			</button> -->
			<view class="avatar-wrap" @click="uploadAvatar">
				<u-avatar :src="baseImgUrl+formData.avatar" size="162" v-if="formData.avatar"></u-avatar>
				<u-avatar :src="defaultAvatar" size="162" v-else></u-avatar>
				<image src="/static/images/icon-camera.png" mode="aspectFit"></image>
			</view>

		</view>
		<u-gap height="40"></u-gap>
		<u-form :model="formData" ref="formRef" :label-width="150" input-align="right" :error-type="['toast']">
			<view class="bgw u-p-l-28 u-p-r-28 u-m-b-28">
				<u-form-item label="手机号">
					<u-input v-model="userInfo.phone" placeholder="未知" disabled />
				</u-form-item>
				<u-form-item label="昵称" prop="nickName">
					<u-input v-model="formData.nickName" placeholder="请输入您的昵称" />
				</u-form-item>
				<u-form-item label="性别" prop="sex">
					<g-input-picker v-model="formData.sex" :range="optionsData.sex" mode="selector"
						:clearable="false"></g-input-picker>
				</u-form-item>
				<u-form-item label="生日" prop="birth" :border-bottom="false">
					<g-input-picker v-model="formData.birth" mode="date" :clearable="true"></g-input-picker>
				</u-form-item>
			</view>
			<view class="bgw u-p-l-28 u-p-r-28">
				<u-form-item label="推荐码">
					<u-input v-model="userInfo.referralCode" placeholder="未知" disabled />
				</u-form-item>
				<u-form-item label="注册时间" :border-bottom="false">
					<u-input v-model="userInfo.created" placeholder="未知" disabled />
				</u-form-item>
			</view>
		</u-form>
	</view>
	<u-gap height="140"></u-gap>
	<view class="fixed-bottom u-p-28 bgw">
		<u-button type="primary" shape="circle" :loading="loading" @click="submit">确定</u-button>
	</view>
</template>


<script setup>
	import store from '@/store/index.js'; //需要引入store
	import {
		ref,
		reactive,
		computed,
		getCurrentInstance
	} from 'vue'
	import {
		onReady,
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import mixins from '@/common/js/mixins.js'; //需要引入store
	import mixinUpload from '@/common/js/mixinUpload.js';
	const {
		proxy
	} = getCurrentInstance();
	const {
		chooseImage,
		uploadFile
	} = mixinUpload();
	const {
		baseImgUrl
	} = proxy
	const {
		nav,
		navLogin,
		toastNavBack
	} = proxy.$util;
	const userInfo = computed(() => store.state.$userInfo)
	const optionsData = reactive({
		sex: [
			{
				label: '保密',
				value: 2
			},
			{
				label: '男',
				value: 0
			},
			{
				label: '女',
				value: 1
			},
		]
	});
	const formRef = ref()
	const formRules = {
		nickName: [{
			required: true,
			message: '请输入昵称',
			trigger: 'blur,change'
		}],
	};
	const formData = reactive({
		nickName: '',
		avatar: '',
		sex:'',
		birth:''
	})
	const loading = ref(false);
	formData.avatar = userInfo.value.avatar;
	formData.nickName = userInfo.value.nickName;
	formData.sex = userInfo.value.sex;
	formData.birth = userInfo.value.birth;
	const uploadAvatar = () =>{
		chooseImage(1).then(res=>{
			uploadFile(res.tempFilePaths[0]).then(img=>{
				formData.avatar = img.url;
			}).catch(r=>{
				uni.$u.toast('图片上传失败');
			})
		}).catch(res=>{
			uni.$u.toast('图片选择失败');
		})	
	}
	const submit = (e) => {
		// if (!formData.avatar) {
		// 	uni.$u.toast('请上传头像');
		// 	return;
		// }
		// console.log(e);
		formRef.value.validate(valid => {
			if (valid) {
				// uni.showLoading({
				// 	title: '加载中',
				// });
				loading.value = true
				proxy.$u.api.editUsersMe(formData).then(res => {
					let {
						code,
						msg,
						data
					} = res;
					loading.value = false
					if (code != 200) {
						uni.$u.toast(msg || '错误');
						return;
					};
					store.dispatch('getUserInfo')
					toastNavBack(res.msg || '成功')
				}).catch(res => {
					loading.value = false
					// uni.hideLoading()
				})
			} else {
				console.log('验证失败');
			}
		});
	}
	onReady(() => {
		formRef.value.setRules(formRules);
	})
	onLoad((d) => {

	})
	onShow(() => {


	})
</script>
<style>

</style>
<style lang="scss" scoped>
	.fixed-bottom {
		width: 750rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -4rpx 28rpx 0rpx rgba(202, 206, 208, 0.3);
		border-radius: 32rpx 32rpx 0rpx 0rpx;
	}

	// .btn-avatar {
	// 	background: none;

	// 	&::after {
	// 		display: none;
	// 	}
	// }

	.avatar-wrap {
		position: relative;
		width: 162upx;
		height: 162upx;

		image {
			position: absolute;
			width: 40upx;
			height: 40upx;
			bottom: 10upx;
			right: 10upx;
		}
	}
</style>